<template>
	<div class="hello-page">
		<Header :headerTitle="headerTitle" />
		<div class="chart-box">
			<div class="chart-item chartitem-one">
				<!-- 第一个块：累计维修完成 -->
				<div class="summary repair-summary">
					<div class="summary-header">
						<div class="summary-title">累计维修完成</div>
						<img src="../../assets/img/user.png" alt="维修图标" class="summary-icon">
						<div class="summary-value">
							<div class="summary-num">{{ RepairTotal.totalRepairTimes }}</div>
							<div class="summary-unit">次</div>
						</div>
					</div>
					<div class="repair-list">
						<div class="repair-item" v-for="(item, index) in RepairTotal.detail" :key="index">
							<div class="repair-title">{{ item.label }}</div>
							<div class="repair-text">
								<div class="repair-num">{{ item.value }}</div>
								<div class="repair-unit">{{ item.unit }}</div>
							</div>
							<img src="../../assets/img/UP.png" alt="上升图标" class="trend-icon" v-if="item.isUp">
							<img src="../../assets/img/down.png" alt="下降图标" class="trend-icon" v-else>
						</div>
					</div>
				</div>

				<!-- 第二个块：累计巡检完成 -->
				<div class="summary inspection-summary">
					<div class="summary-header">
						<div class="summary-title">累计巡检完成</div>
						<img src="../../assets/img/user.png" alt="巡检图标" class="summary-icon">
						<div class="summary-value">
							<div class="summary-num">{{ inspectionTotal.totalInspectionTimes }}</div>
							<div class="summary-unit">次</div>
						</div>
					</div>
					<div class="repair-list">
						<div class="repair-item" v-for="(item, index) in inspectionTotal.detail" :key="index">
							<div class="repair-title">{{ item.label }}</div>
							<div class="repair-text">
								<div class="repair-num">{{ item.value }}</div>
								<div class="repair-unit">{{ item.unit }}</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 第三个块：ECharts 图表 -->
				<div class="inspection-chart-Month">
					<echarts-pie :chartData="inspectionMonth"></echarts-pie>
				</div>
			</div>
			<div class="chart-item chartitem-two">
				<div class="year-box">
					<!-- 年度数据 -->
					<div class="year-item" v-for="(item, index) in yearData" :key="index">
						<div class="year-header">
							<div class="year-title">{{ item.title }}</div>
							<div class="year-numbers">
								<div class="year-num-text">{{ item.completedTimes }} / <span>{{ item.totalTimes
										}}</span></div>
								<div class="year-num-unit">次</div>
							</div>
						</div>
						<div class="year-content">
							<div class="year-img">
								<img :src="item.img" alt="图标" class="year-icon">
							</div>
							<div class="year-details">
								<div class="year-list-text" v-for="(depItem, depIndex) in item.detail" :key="depIndex">
									<div class="dept-name">{{ depItem.deptName }}</div>
									<div class="dept-numbers">{{ depItem.completedTimes }} / <span>{{ depItem.totalTimes
											}}</span></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="machine-box">
					<div class="oee-box">
						<!-- <machine type="power" :lineChartForm="lineChartForm"></machine> -->
					</div>
					<div class="top5-box">
						<div class="subtitle-title">故障Top5</div>
						<div class="repair-list header">
							<div class="repair-title font14">设备名称</div>
							<div class="repair-text">
								<div class="repair-num font14">故障次数</div>
								<div class="repair-unit font14">单位</div>
							</div>
						</div>
						<div class="repair-list" v-for="(item, index) in faultyDevice" :key="index">
							<div class="repair-title">{{ item.deviceName }}</div>
							<div class="repair-text">
								<div class="repair-num">{{ item.faultTimes }}</div>
								<div class="repair-unit">次</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="chart-item chartitem-three">
				<div class="online-box">
					<div class="online-title">设备实时在线数量(台)</div>
					<div class="online-content">
						<div class="online-chart" v-for="(item, index) in onlineDeviceNum" :key="index">
							<echartsRing :echartsRingData="item"></echartsRing>
						</div>
					</div>
				</div>
				<div class="fault-box">
					<div class="fault-title">设备故障监控</div>
					<div class="fault-item" v-for="(item, index) in DeviceMonitor" :key="index">
						<progressLoop2 type="power" :barData="item"></progressLoop2>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import Header from '../components/chartLayout/header.vue';
import { ref, onMounted } from 'vue';
import echartsPie from '../components/echartsPie';
import echartsRing from '../components/echartsRing';
import machine from '../components/machine';
import progressLoop2 from '../components/progressLoop2'
import {
	deviceRepairTotal,
	deviceInspectionsTotal,
	deviceInspectionsMonth,
	deviceRepairYear,
	deviceInspectionYear,
	deviceReportYear,
	deviceFaultyTop,
	deviceOnlineNum,
	devicereportMonitor,
	deviceOEEType,
	deviceOEETrends,
} from "@/api/equipment.js";

const headerTitle = ref('设备管理数据看板')

const RepairTotal = ref({});// 累计维修完成
const inspectionTotal = ref({});// 累计巡检完成
const inspectionMonth = ref({});// 本月巡检完成情况
// 年度数据
const yearData = ref([
	// { title: '年度故障上报', img: new URL("../../assets/img/sl.png", import.meta.url).href }
])
const faultyDevice = ref([])
const onlineDeviceNum = ref([])
const DeviceMonitor = ref([])
const getInitData = () => {
	deviceRepairTotal().then((res) => {
		// 累计维修完成
		const { data } = res;
		RepairTotal.value.totalRepairTimes = data.totalRepairTimes;
		RepairTotal.value.detail = [
			{
				label: '平均响应时间',
				value: data.avgResponseTimes,
				unit: '小时',
				trend: data.avgResponseTimesUp
			},
			{
				label: '平均维修时间',
				value: data.avgRepairTime,
				unit: '小时',
				trend: data.avgRepairTimeUp
			},
			{
				label: '本月报修次数',
				value: data.thisMonthReportTimes,
				unit: '次',
				trend: data.thisMonthReportTimesUp
			},
			{
				label: '本月维修完成',
				value: data.thisMonthRepairTimes,
				unit: '次',
				trend: data.thisMonthRepairTimesUp
			}
		];

	});
	deviceInspectionsTotal().then((res) => {
		// 累计巡检完成
		const { data } = res;
		inspectionTotal.value.totalCheckTimes = data.totalCheckTimes;
		inspectionTotal.value.detail = [
			{ label: '平均巡检周期', value: data.avgCheckCycle, unit: '次/周' },
			{ label: '人均巡检次数', value: data.avgCheckTimes, unit: '次/人/年' },
			{ label: '平均巡检时长', value: data.avgCheckTime, unit: '小时/次' }
		]
	})
	deviceInspectionsMonth().then(res => {
		// 本月巡检
		const { data } = res;
		inspectionMonth.value.title = '本月巡检完成情况';
		inspectionMonth.value.data = data.entries.map(entry => ({
			name: entry.stateText,
			value: entry.totalTimes,
		}));
	})
	// 请求年度维修数据
	deviceRepairYear().then(res => {
		const { data } = res;
		yearData.value.push({
			title: '年度维修',
			totalTimes: data.totalTimes,        // 总次数
			completedTimes: data.completedTimes, // 完成次数
			detail: data.entries.map(entry => ({
				deptName: entry.deptName,
				totalTimes: entry.totalTimes,
				completedTimes: entry.completedTimes,
			})),
			img: new URL("../../assets/img/fj.png", import.meta.url).href // 图片路径
		});
	});

	// 请求年度保养数据
	deviceInspectionYear().then(res => {
		const { data } = res;
		yearData.value.push({
			title: '年度巡检',
			totalTimes: data.totalTimes,        // 总次数
			completedTimes: data.completedTimes, // 完成次数
			detail: data.entries.map(entry => ({
				deptName: entry.deptName,
				totalTimes: entry.totalTimes,
				completedTimes: entry.completedTimes,
			})),
			img: new URL("../../assets/img/sd.png", import.meta.url).href // 图片路径
		});
	});

	// 请求年度巡检数据
	deviceReportYear().then(res => {
		const { data } = res;
		yearData.value.push({
			title: '年度故障上报',
			totalTimes: data.totalTimes,        // 总次数
			completedTimes: data.completedTimes, // 完成次数
			detail: data.entries.map(entry => ({
				deptName: entry.deptName,
				totalTimes: entry.totalTimes,
				completedTimes: entry.completedTimes,
			})),
			img: new URL("../../assets/img/zq.png", import.meta.url).href // 图片路径
		});
	});
	deviceFaultyTop().then(res => {
		const { data } = res;
		faultyDevice.value = data.entries
	});
	deviceOnlineNum().then(res => {
		const { data } = res;
		onlineDeviceNum.value = data.entries.map(item => ({
			title: item.deptName,
			data: [
				{ name: "在线", value: item.onlineQty },
				{ name: "未在线", value: item.offlineQty }
			]
		}));
	})
	devicereportMonitor().then(res => {
		const { data } = res;
		DeviceMonitor.value = data.entries.map(entry => ({
			depName: entry.deptName,
			xAxisData: entry.dataset.map(dataPoint => dataPoint.x), // 提取所有 x 值
			seriesData: entry.dataset.map(dataPoint => dataPoint.y)  // 提取所有 y 值
		}));
	})
},
	getOptions = () => {
		deviceOEEType().then(res => {
			// const { data } = res;
			// console.log('data==========', data);

		})
	}

onMounted(() => {
	setInterval(() => {
		this.getInitData();
	}, 1000 * 60 * 15);
	getInitData();
	getOptions();
})


</script>
<style lang="scss" scoped>
@import '../components/chartLayout/chartLayout.scss';

/* 图表容器样式 */
.chart-box {
	display: flex;
	justify-content: space-between;
	padding: 0 1%;
	// gap: 0.5%; /* 控制每个 chart-item 之间的间隔 */
	height: 91vh;
	/* 确保与底部有 1vh 的间隔 */
	margin-bottom: 1vh;
	box-sizing: border-box;
}

/* 第一个和第三个 item 占 30% 宽度 */
.chartitem-one,
.chartitem-three {
	width: 30%;
	/* 30% 宽度 */
}

/* 第二个 item 占剩余的宽度 */
.chartitem-two {
	flex-grow: 1;
}

/* 调整 chart-item 的背景和其他样式 */
.chart-item {
	background-color: rgba(255, 255, 255, 0.1);
	/* 用于调试的背景色 */
	margin: 0 0.25%;
	/* 设置间距 */
}

.chartitem-one {
	.summary {
		box-sizing: border-box;
		padding: 5px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.repair-summary {
		height: 30%;
	}

	.inspection-summary {
		height: 25%;
		/* 第二个块的高度 */
	}

	.inspection-chart-Month {
		height: 45%;
		// background-color: #e8be08;
	}

	.summary-header {
		display: flex;
		align-items: center;

	}

	.summary-title {
		color: #06cacd;
		font-size: 14px;
		/* 标题字体大小 */
		font-weight: bold;
		/* 加粗字体 */
		margin-right: 8px;
		/* 标题和图标之间的间距 */
	}

	.summary-icon {
		width: 30px;
		/* 图标宽度 */
		height: auto;
		/* 高度自动适应 */
	}

	.summary-value {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中 */

		.summary-num {
			font-size: 20px;
			/* 数字字体大小 */
			font-weight: bold;
			/* 加粗字体 */
			color: #e8be08;
			/* 数字颜色 */
		}

		.summary-unit {
			font-size: 14px;
			/* 单位字体大小 */
			margin-left: 4px;
			/* 数字和单位之间的间距 */
		}
	}

	.repair-list {
		flex-grow: 1;
		/* 允许列表扩展填充剩余空间 */
		overflow-y: auto;
		/* 超出时垂直滚动 */
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 垂直排列 */
	}

	.repair-item {
		font-size: 12px;
		/* 字体大小 */
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 使内容分布在两端 */
		align-items: center;
		/* 垂直居中 */
		border-radius: 4px;
		/* 添加圆角 */
		padding: 2px 5px;
	}

	.repair-title {
		color: #06cacd;
		/* 标题颜色 */
	}

	.repair-text {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中 */

		.repair-num {
			color: #e8be08;
			/* 数字颜色 */
			font-weight: bold;
			/* 加粗数字 */
		}

		.repair-unit {
			font-size: 12px;
			/* 单位字体大小 */
			margin-left: 4px;
			/* 数字和单位之间的间距 */
		}
	}

	.trend-icon {
		width: 20px;
		/* 趋势图标宽度 */
		height: auto;
		/* 高度自动适应 */
	}
}

.chartitem-two {
	.year-box {
		padding: 5px;
		height: 40%;
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;
		/* 在行中平均分配空间 */
	}

	.year-item {
		background-color: rgba(255, 255, 255, 0.2);
		/* 背景色 */
		border-radius: 8px;
		/* 圆角 */
		/* 每个年度数据之间的间距 */
		flex: 0 0 calc(50% - 5px);
		/* 每行两个，减去间距的宽度 */
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 垂直排列 */
		height: calc(50% - 5px);
		/* 平分高度，减去间距 */
		box-sizing: border-box;
		/* 包含内边距和边框的总宽度 */
		padding: 0 5px;
	}

	.year-header {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 内容两端对齐 */
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 5px;
		/* 标题和内容之间的间距 */
	}

	.year-title {
		font-size: 14px;
		/* 标题字体大小 */
		font-weight: bold;
		/* 加粗字体 */
		color: #06cacd;
		/* 标题颜色 */
	}

	.year-numbers {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中 */
	}

	.year-num-text {
		font-size: 18px;
		/* 数字字体大小 */
		font-weight: bold;
		/* 加粗字体 */
		color: #e8be08;
		/* 数字颜色 */
	}

	.year-num-unit {
		font-size: 14px;
		/* 单位字体大小 */
		margin-left: 4px;
		/* 数字和单位之间的间距 */
	}

	.year-content {
		display: flex;
		/* 使用flex布局 */
		flex-grow: 1;
		/* 允许内容扩展填充剩余空间 */
	}

	.year-img {
		width: 60px;
		/* 图标宽度 */
		height: auto;
		/* 高度自动适应 */
		margin-right: 10px;
		/* 图标和详细信息之间的间距 */
	}

	.year-icon {
		width: 100%;
		/* 图标适应容器 */
		height: auto;
		/* 高度自动适应 */
	}

	.year-details {
		flex: 1;
		/* 占据剩余空间 */
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 垂直排列 */
	}

	.year-list-text {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 内容两端对齐 */
		margin-bottom: 5px;
		/* 每个详细项之间的间距 */
	}

	.dept-name {
		font-size: 14px;
		/* 部门名称字体大小 */
		color: #06cacd;
		/* 部门名称颜色 */
	}

	.dept-numbers {
		font-size: 14px;
		/* 部门数字字体大小 */
	}

	.machine-box {
		display: flex;
		height: 60%;
	}

	.oee-box {
		width: 55%;
		/* 占据 60% 的高度 */
		background-color: rgba(255, 255, 255, 0.2);
		/* 背景色 */
		padding: 10px;
		/* 内边距 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	.top5-box {
		width: 0 0 45%;
		/* 占据 40% 的高度 */
		background-color: rgba(255, 255, 255, 0.2);
		/* 背景色 */
		padding: 10px;
		/* 内边距 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	.subtitle-title {
		font-size: 16px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		margin-bottom: 10px;
		/* 标题和内容之间的间距 */
	}

	.repair-list {
		display: flex;
		/* 使用 flex 布局 */
		justify-content: space-between;
		/* 两端对齐 */
		margin-bottom: 5px;
		/* 每个条目之间的间距 */
	}

	.header {
		font-weight: bold;
		/* 加粗 */
		margin-bottom: 8px;
		/* 标题和内容之间的间距 */
	}

	.repair-title {
		flex: 1;
		/* 设备名称占据剩余空间 */
		font-size: 14px;
		/* 字体大小 */
		color: #06cacd;
		/* 设备名称颜色 */
	}

	.repair-text {
		display: flex;
		/* 使用 flex 布局 */
		align-items: center;
		/* 垂直居中 */
	}

	.repair-num {
		font-size: 14px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		color: #e8be08;
		/* 故障次数颜色 */
		margin-right: 4px;
		/* 故障次数和单位之间的间距 */
	}

	.repair-unit {
		font-size: 14px;
		/* 字体大小 */
	}

	.chartitem-three {
		.online-box {
			height: 20%;
			/* 占据 20% 的高度 */
			background-color: rgba(255, 255, 255, 0.2);
			/* 背景色 */
			padding: 10px;
			/* 内边距 */
			border-radius: 8px;
			/* 圆角 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 阴影效果 */
		}

		.online-title {
			font-size: 16px;
			/* 字体大小 */
			font-weight: bold;
			/* 加粗 */
			margin-bottom: 10px;
			/* 标题和内容之间的间距 */
		}

		.online-content {
			display: flex;
			/* 使用 Flex 布局 */
			flex-wrap: wrap;
			/* 自动换行 */
			justify-content: center;
			/* 水平居中 */
		}

		.online-chart {
			flex: 0 0 auto;
			/* 自适应宽度 */
			margin: 5px;
			/* 每个图表之间的间距 */
		}

		.fault-box {
			height: 80%;
			/* 占据 80% 的高度 */
			background-color: rgba(255, 255, 255, 0.2);
			/* 背景色 */
			padding: 10px;
			/* 内边距 */
			border-radius: 8px;
			/* 圆角 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 阴影效果 */
		}

		.fault-title {
			font-size: 16px;
			/* 字体大小 */
			font-weight: bold;
			/* 加粗 */
			margin-bottom: 10px;
			/* 标题和内容之间的间距 */
		}

		.fault-item {
			height: 33%;
			/* 每个故障项占据 33% 的高度 */
			// margin-bottom: 10px;
			/* 每个故障项之间的间距 */
		}
	}
}
</style>